<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <style></style>
</head>
<body>
  <h1>用户列表</h1>
  <hr>
  <table align="center" border="1" style="border-color: aqua;">
      <thead>
        <tr>
          <th>序号</th>
          <th>用户名</th>
          <th>电话号码</th>
          <th>是否会员</th>
          <th>删除会员</th>
        </tr>
      </thead>
      <tbody id="box">
        <tr>
          <td>1</td>
          <td>tom</td>
          <td>13988886666</td>
          <td>1</td>
          <td><button>删除</button></td>
        </tr>
      </tbody>
  </table>
  <script>
    // 1.获取元素
    var box=document.getElementById('box');
    //调用ajax()
    ajax();
    // 创建ajax
    function ajax(){
      var xhr=new XMLHttpRequest();
      xhr.onreadystatechange=function(){
         if(xhr.readyState==4){
           if(xhr.status>=200&xhr.status<300){
            var result=JSON.parse(xhr.responseText);
            if(result.code){
              show(result.data);
            }else{
              alert(result.msg);
            }       
           }
         }
      }
      xhr.open('post','/admin/search',true);
      xhr.send();
    }

    // show函数，为了遍历显示数据插入到某个元素中
    function show(data){
      var str='';
      var box=document.getElementById('box');
      for(var i in data){
          str+=`<tr>
            <td>${data[i].u_id}</td>
            <td>${data[i].u_names}</td>
            <td>${data[i].u_phone}</td>
            <td>${data[i].u_member}</td>
            <td><button onclick="del(${data[i].u_id})">删除</button></td>
            </tr>`;
      }
      box.innerHTML=str;
    }
  </script>
</body>
</html>